<template>
    <div class="box">
        <div class="box-left">
            <div class="box-left-cicle" id="circle"></div>
            <div class="box-left-line" id="line"></div>
        </div>
        <div class="box-middle" id="china"></div>
        <div class="box-right">
            <div class="box-right-panel" id="panel">
                <div class="boxall">
                    <div class="fontsty">
                        {{ store.pannellist.value ? store.pannellist.value[2] : 0 }}</div>
                    <div>今年总人数</div>
                </div>
                <div class="boxall">
                    <div class="fontsty">
                        +{{ store.pannellist.children ? store.pannellist.children[0].dead : 0 }}</div>
                    <div>死亡人口</div>
                </div>
                <div class="boxall">
                    <div class="fontsty">
                        -{{ store.pannellist.children ? store.pannellist.children[0].birth : 0 }}</div>
                    <div>出生人口</div>
                </div>
            </div>
            <div class="box-right-table">
                <table cellspacing="0">
                    <thead>
                        <tr>
                            <th>地区</th>
                            <th>省份常驻人数</th>
                            <th>死亡人数</th>
                            <th>出生人数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, key) in store.items" :key="key">
                            <td>{{ item.city }}</td>
                            <td>{{ item.population }}</td>
                            <td>{{ item.dead }}</td>
                            <td>{{ item.birth }}</td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>
        <div class="bckgimg"></div>
    </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { useListStore } from './store';
import './assets/china.js'
import { geoCoordMap } from './assets/geoMap';
// 使用pinia调用方法
const store = useListStore()
import * as echarts from 'echarts';
// 基于准备好的dom，初始化echarts实例
onMounted(async () => {
    // 地图数据初始化
    await store.getpersonlist()
    // 初始化地图
    mapint()
    // 初始化扇形图
    cicleint()
    lininit()
})

// 地图初始化
const mapint = () => {
    const person = store.personlist.data.data.list
    console.log(store.personlist.data.data.list)
    // 这里我们要初始化让表格有数据
    store.items = person[1].children
    let data = person.map(item => {
        return {
            name: item.province,
            value: [...geoCoordMap[item.province], item.population],
            children: item.children
        }
    })
    // console.log(person,data)
    let mychart = echarts.init(document.querySelector('#china'))
    // 给元素里面添加数据
    mychart.setOption({
        // backgroundColor: "black",
        geo: {
            map: "china",
            aspectScale: 0.8,
            layoutCenter: ["50%", "50%"],
            layoutSize: "100%",
            itemStyle: {
                areaColor: {
                    type: "linear-gradient",
                    x: 0,
                    y: 1200,
                    x2: 1000,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: "#152E6E", // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: "#0673AD", // 50% 处的颜色
                        },
                    ],
                    global: true, // 缺省为 false
                },
                shadowColor: "#0f5d9d",
                shadowOffsetX: 0,
                shadowOffsetY: 15,
                opacity: 0.5,

            },
            emphasis: {
                areaColor: "#0f5d9d",
            },
            // 南海诸岛
            regions: [
                {
                    name: "南海诸岛",
                    itemStyle: {
                        areaColor: "rgba(0, 10, 52, 1)",
                        borderColor: "rgba(0, 10, 52, 1)",
                        opacity: 0,
                        label: {
                            show: false,
                            color: "#009cc9",
                        },
                    },
                    label: {
                        show: false,
                        color: "#FFFFFF",
                        fontSize: 12,
                    },
                },
            ],
        },
        series: [
            {
                type: "map",
                // selectedMode: "multiple",
                map: "china",//使用地图
                aspectScale: 0.8,
                layoutCenter: ["50%", "50%"], //地图位置
                layoutSize: "110%",
                zoom: 1, //当前视角的缩放比例
                // roam: true, //是否开启平游或缩放
                scaleLimit: {
                    //滚轮缩放的极限控制
                    min: 1,
                    max: 2,
                },
                // 省份标签名字
                label: {
                    show: true,
                    color: "#FFFFFF",
                    fontSize: 10,
                },
                // 每个省份的样式
                itemStyle: {
                    areaColor: "#0c3653",
                    borderColor: "#1cccff",
                    borderWidth: 1.8,
                },
                // 鼠标经过的样式
                emphasis: {
                    areaColor: "#56b1da",
                    label: {
                        show: true,
                        color: "#fff",
                    },
                },
                data: data,
            },
            // 气泡样式
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                symbol: 'pin',
                // 大小，宽高
                symbolSize: [45, 45],
                label: {
                    show: true,
                    color: "#fff",
                    // 气泡的数据
                    formatter: (value) => {
                        return value.data.value[2]
                    }
                },
                data: data,
            },
        ],
    })
    // 给元素增加点击事件
    mychart.on('click', (e) => {
        store.items = e.data.children
        store.pannellist = e.data
        cicleint()
        lininit()
        console.log(store.pannellist)
    })
}
const cicleint = () => {
    let mycircle = echarts.init(document.querySelector('#circle'))
    console.log(11, store.items)
    let data = store.items.map((item) => {
        return {
            value: item.population,
            name: item.city
        }
    })
    mycircle.setOption({
        title: {
            text: '城市总人口统计',
            left: 'center',
            textStyle: {
                color: '#fff', // 使用十六进制黑色
                fontSize: 18,
                fontWeight: 'bold'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                type: 'pie',
                radius: ['40%', '60%'],
                itemStyle: {
                    borderRadius: 7,
                    borderColor: '#3c5e8b',
                    borderWidth: 1

                },
                // 每个图形的标签,圆形中间显示
                label: {
                    show: false,
                    position: 'center'
                },
                // 鼠标悬停上面
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 18,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: data
            }
        ]
    })
}
const lininit = () => {
    let xdata = [], ydata = []
    store.items.map(item => {
        xdata.push(item.city)
        ydata.push(item.dead)
    })
    // console.log(xdata,ydata)
    let mycline = echarts.init(document.querySelector('#line'))
    mycline.setOption({
        title: {
            text: '城市出生统计',
            left: 'center',
            textStyle: {
                color: '#fff', // 使用十六进制黑色
                fontSize: 18,
                fontWeight: 'bold'
            }
        },
        xAxis: {
            type: 'category',
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            data: xdata
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                // data: [150, 230, 224, 218, 135, 147, 260],
                data: ydata,
                type: 'line'
            }
        ]
    })
}
</script>
<style lang="less">
* {
    margin: 0;
    padding: 0;
}

.box {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
    .bckgimg {
        z-index: -100;
        height: 100%;
        width: 100%;
        position: fixed;
        top:0;
        left:0;
        background-image: url(./assets/1.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .box-left {
        width: 320px;

        .box-left-cicle {
            margin-top: 20px;
            width: 100%;
            height: 300px;
            background-color: rgba(70, 117, 156, 0.4);
        }

        .box-left-line {
            margin-top: 20px;
            width: 100%;
            height: 300px;
            background-color: rgba(70, 117, 156, 0.4);
        }
    }

    .box-middle {
        flex: 1;
        justify-content: center;
    }

    .box-right {
        width: 330px;
        .box-right-panel {
            margin-top: 10px;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 12px;

            // flex-wrap: wrap;
            .boxall {
                padding: 15px;
                margin-right: 4px;
                background-color: rgba(25, 117, 192, 0.7);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                border-radius: 10px;

                div {
                    margin-top: 3px;
                    font-size: 16px;
                    color: #fff;
                }

                .fontsty {
                    color: #e49f0a;
                    font-weight: 700;
                }
            }
        }

        table {
            background-color: rgba(70, 117, 156, 0.4);
            margin-top: 10px;

            thead,
            tbody,
            th,
            tr,
            td {
                border: 1px solid black;
                text-align: center;
                padding: 7px;
                margin-left: 1px;

            }
        }
    }


}
</style>
